import React, { Component } from 'react';

const Test = (props) => {
  return (
    <div>
      {props.data.name}
    </div>
  )
}

const LazyComponent = (Component, api) => {
  const getComponent = () => {
    return new Promise(async resolve => {
      const data = await api();
      resolve({
        default: (props) => <Component data={data} {...props}/>
      })
    })
  }
  return React.lazy(getComponent)
}

const getData = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve({name: 'zhangsan'}), 1000)
  })
}

const AsyncTest = LazyComponent(Test, getData);

export default function(props) {
  return (
    <div>
      <React.Suspense fallback={(<div>loading...</div>)}>
        <AsyncTest/>
      </React.Suspense>
    </div>
  )
}